<!-- 打印时拥有水印 -->
<template>
  <div>
    <div
      id="printMe"
      :style="{ backgroundImage: showBa ? `url(${orgBackground})` : '' }"
    >
      需要打印的内容,给div加id为printMe，给打印按钮加v-print="printObj"，并给div设置打印背景
    </div>

    <!-- //打印按钮 -->
    <el-button type="primary" @click="handlePrint">打印</el-button>
    <el-button ref="printBtn" v-show="false" type="primary" v-print="printObj"
      >打印</el-button
    >
  </div>
</template>
     
     
    <script>
import watermark from "./componentWateMark";
export default {
  data() {
    return {
      orgBackground: "",
      showBa: false,
      printObj: {
        id: "printMe",
        closeCallback: () => {
          this.showBa = false; // 取消或者打印成功，返回页面时不显示水印
          console.log(this.showBa);
        },
      },
    };
  },
  methods: {
    // 打印按钮，打印时显示水印
    handlePrint() {
      this.showBa = true;
      this.$refs.printBtn.$el.click();
    },
  },
  mounted() {
    localStorage.setItem("loginUserName", "admin");
    this.orgBackground = watermark.addWaterMark();
    console.log(this.orgBackground,"orgBackground");
     watermark.set("水印内容")
  },
};
</script>
     
     
    <style media="print">
@page {
  size: auto;
  margin: 5mm 6mm;
}
</style>
     
     